<template>
    <div>
        <bread-crumb></bread-crumb>
        <h1>学生成绩分析</h1>
        <el-row>
            <el-col :span="8" :offset="6">
                <el-input placeholder="请输入学号" v-model.trim="stu_id"></el-input>
            </el-col>
            <el-col :span="2">
                <el-button @click="getChartsData">分析成绩</el-button>
            </el-col>
        </el-row>
        <div class="stu_name">学生的姓名:{{stu_name}}</div>
        <div class="echartsAnalysis">
            <el-row>
                <el-col :span="8">
                    <div id="main" style="width:100%;height:100%"></div>
                </el-col>
                <el-col :span="8">
                    <div id="chineseChart" style="width:100%;height:100%"></div>
                </el-col>
                <el-col :span="8">
                    <div id="englishChart" style="width:100%;height:100%"></div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <div id="mathChart" style="width:100%;height:100%"></div>
                </el-col>
                <el-col :span="8">
                    <div id="lizongChart" style="width:100%;height:100%"></div>
                </el-col>
                <el-col :span="8">
                    <div id="wenzongChart" style="width:100%;height:100%"></div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import {req_entry_grade,req_mid_grade,req_end_grade} from '@/api/gradeInfo.js';
import {stacked,basisLine} from '@/utils/chartsClass.js';
    export default {
        data(){
            return{
                stu_id:'',
                stu_name:'',
            }
        },
        mounted(){
            
        },
        methods:{
            async getChartsData(){
                // 获取到三次的考试成绩
                let result_entry=await req_entry_grade(this.stu_id);
                let result_mid=await req_mid_grade(this.stu_id);
                let result_end=await req_end_grade(this.stu_id);
                this.stu_name=result_entry.data[0].stu_name;
                // console.log(result_entry.data,result_mid.data,result_end.data);
                // 根据学号请求回来三次考试的成绩
                let gradeClass = ["chinese", "english", "math", "lizong", "wenzong"];
                let entryData = [];
                let midData = [];
                let endData = [];

                //  经过对echarts折现堆叠图的分析
                // 数据处理  按照语文", "英语", "数学", "理综", "文综  变为数组
                console.log(result_entry.data[0],result_mid.data[0],result_end.data[0]);
                // 从后台拿到的数据都是[{}]  ---->[]
                for(let i =0;i<gradeClass.length;i++){
                    // 入学成绩处理的结果 目的是得到  放到echarts堆叠图当中的入学成绩的值
                    getGradeData(gradeClass[i], result_entry.data[0], entryData);

                    // 期中成绩处理的结果 目的是得到  放到echarts堆叠图当中的期中成绩的值
                    getGradeData(gradeClass[i], result_mid.data[0], midData);

                    //  期末成绩处理的结果 目的是得到  放到echarts堆叠图当中的期末成绩的值
                    getGradeData(gradeClass[i], result_end.data[0], endData);
                }
                function getGradeData(gradeItem, gradeData, scoreData) {
                    for (let key in gradeData) {
                    if (key == gradeItem) {
                        scoreData.push(gradeData[key]);
                    }
                    }
                }


                // function getGradeData(gradeItem){
                //     for(let key in result_entry.data[0]){
                //     if(key == gradeItem){
                //         entryData.push(result_entry.data[0][key]);
                //     }
                //     }
                // }
                console.log(entryData, midData, endData);
                // 堆叠图是获取成绩之后产生图
                // this.getMainChart(entryData, midData, endData);
                // stacked是从utils中封装的堆叠图模块
                stacked(this,'main',entryData, midData, endData);

                // 语文成绩分析
                // 如何将三次成绩当单科成绩提炼出来放到一个新数组当中
                // let gradeSubject=[];
                // gradeSubject.push(result_entry.data[0].chinese);
                // gradeSubject.push(result_mid.data[0].chinese);
                // gradeSubject.push(result_end.data[0].chinese);
                // console.log(gradeSubject);

                // basisLine(this,'chineseChart','语文',[50,120,150]);

                function score(
                    that,
                    containerId,
                    subject,
                    gradeEntry,
                    gradeMid,
                    gradeEnd,
                    subjectItem
                ) {
                    let gradeSubject = [];
                    gradeSubject.push(gradeEntry[subjectItem]);
                    gradeSubject.push(gradeMid[subjectItem]);
                    gradeSubject.push(gradeEnd[subjectItem]);
                    basisLine(that, containerId, subject, gradeSubject);
                }
                // 获取语文的成绩分析图
                score(
                    this,
                    "chineseChart",
                    "语文",
                    result_entry.data[0],
                    result_mid.data[0],
                    result_end.data[0],
                    "chinese"
                ),
                // 获取英语的成绩分析图
                score(
                    this,
                    "englishChart",
                    "英语",
                    result_entry.data[0],
                    result_mid.data[0],
                    result_end.data[0],
                    "english"
                );

                //获取数学的成绩分析图
                score(
                    this,
                    "mathChart",
                    "数学",
                    result_entry.data[0],
                    result_mid.data[0],
                    result_end.data[0],
                    "math"
                );
                //获取理综的成绩分析图
                score(
                    this,
                    "lizongChart",
                    "理综",
                    result_entry.data[0],
                    result_mid.data[0],
                    result_end.data[0],
                    "lizong"
                );
                // 获取文综的成绩分析图
                score(
                    this,
                    "wenzongChart",
                    "文综",
                    result_entry.data[0],
                    result_mid.data[0],
                    result_end.data[0],
                    "wenzong"
                );
            },
                        
        }
    }
</script>

<style lang="scss" scoped>
    div{
        height: 30px;
        .stu_name{
            margin: 30px 0;
            font-size: 20;
            font-weight: 700;
        }
        .echartsAnalysis{
            div{
                height: 300px;
            }
        }
    }
</style>